<template>
	<view class="product-details">
		<view class="product-details-head">
			<swiper class="gallery-swiper" autoplay indicator-dots>
				<swiper-item class="gallery-swiper-item">
					<image class="swiper-pic" :src="obtProductDetails.info.primary_pic_url" mode='aspectFit' />
				</swiper-item>
				<swiper-item class="gallery-swiper-item" v-for="item in obtProductDetails.gallery" :key="item.id">
					<image class="swiper-pic" :src="item.img_url" mode='aspectFit' />
				</swiper-item>
			</swiper>
			<view class="retail-price"><text class="retail-price-unit">￥</text>{{obtRetailPrice}}</view>
			<view class="details-title-box">
				<view class="goods-brief">
					<text class="promotion-desc" v-if="obtProductDetails.info.promotion_desc">{{obtProductDetails.info.promotion_desc}}</text>
					{{obtProductDetails.info.goods_brief}}
				</view>
				<view class="shareit">
					<image class="icon-shareit" src="../../static/images/ShareIt.png" mode="widthFix" />
				</view>
			</view>
			<view class="product-details-info">
				<view class="extra-price">配送费：{{(obtProductDetails.info.extra_price==0)?'包邮':obtProductDetails.info.extra_price}}</view>
				<view class="sell-volume">销量：{{obtProductDetails.info.sell_volume}} {{obtProductDetails.info.goods_unit}}</view>
			</view>
		</view>
		<view class="product-details-content">
			<view class="attribute">
				<view class="attribute-item" v-for="(item,index) in obtProductDetails.attribute" :key="index"><text class="attribute-item-txt">{{item.name}}：</text>{{item.value}}</view>
			</view>
			<rich-text :nodes="obtGoodsDesc" type="text"></rich-text>
			<view class="supplement" v-if="obtQuestionLen">
				<view class="supplement-title">购买须知</view>
				<view class="question-item" v-for="item in obtProductDetails.issue" :key="item.id">
					<text class="item-block question-item-question">{{item.question}}</text>
					<text class="item-block question-item-answer">{{item.answer}}</text>
				</view>
			</view>
		</view>
		<CompBottomLine />
		<view class="product-details-mask" v-show="showSelectBox">
			<view class="product-details-selectbox">
				<view class="slect-buy-head">
					<image class="product-pic" :src="obtProductDetails.info.primary_pic_url" mode='aspectFit' />
					<view class="head_box">
						<view class="retail-title">{{obtProductDetails.info.name}}</view>
						<view class="retail-price"><text class="retail-price-unit">￥</text>{{obtRetailPrice}}</view>
					</view>
				</view>
				<view class="slect-buy-quantity">
					<text>购买数量</text>
					<uni-number-box :value="BuyData.number" :step="1"></uni-number-box>
				</view>
				<button type="primary" @click="postToCard">确定</button>
				<view class="close" @click="showSelectBox = false">×</view>
			</view>
		</view>
		<view class="product-details-foot">
			<view class="cart-btn cart-go">购物车</view>
			<view class="cart-btn cart-join" @click="ProductToCart(-1)">加入购物车</view>
			<view class="cart-btn cart-buy" @click="ProductToCart(1)">立即购买</view>
		</view>
	</view>
</template>

<script>
	import * as types from "@/store/types.js"
	import CompBottomLine from "@/components/Comp_BottomLine/Comp_BottomLine.vue"
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import {postAddToCart} from "@/api/ShoppingCart.js"

	export default {
		components:{
			CompBottomLine,
			uniNumberBox
		},
		data() {
			return {
				ProductId:0,
				BuyData:{
					goodsId:0, 
					number:0, 
					productId:0,
					joinType:-1,
				},
				showSelectBox:false
			};
		},
		computed: {
			//取出商品详情
			obtProductDetails: function() {
				return this.$store.getters.gproductdetail;
			},	
			obtGoodsDesc:function(){
				let {info:{goods_desc=''}={}} = this.obtProductDetails||{}
				return this.formatRichText(goods_desc)
			},
			obtQuestionLen:function(){
				let {issue=[]} = this.obtProductDetails||{};
				return issue.length||0;
			},
			obtRetailPrice:function(){
				let {info:{retail_price=0}={}} = this.obtProductDetails||{}
				return this.AmountCalculation(retail_price,2)
			}
		},
		methods: {
			Load(){
				if(this.ProductId){
					this.$store.dispatch(types.AProductDetail, this.FormattingQueryStr({
						id:this.ProductId
					}))
				}else{
					uni.navigateBack();
					uni.showToast({
						title: '请求参数不正确',
						icon: 'none'
					});
				}
			},
			ProductToCart(type){
				let {info:{goods_desc='',id=0,goods_sn=0}={}} = this.obtProductDetails||{}
				this.BuyData = {
					goodsId:goods_sn, 
					productId:id,
					number:1, 
					joinType:type,
				}
				this.showSelectBox = true;
			},
			postToCard(){
				const {joinType=-1} = this.BuyData||{};
				postAddToCart(this.BuyData).then(({data})=>{
					console.log("体胶城管",data);
				}).catch(err =>{
					console.log("体胶失败：",err);
				})
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.ProductId = option.pid||0;
			this.Load();
		}
	}
</script>

<style scope lang="less">
	@import "./Page_ProductDetails.less";
</style>
